<template>
  <div>
    <Row :gutter="24">
      <Col :xs="6" :lg="6" class="hidden-mobile">
        <Input icon="search" placeholder="请输入文件名称..." v-model="searchForm.original_name"/>
      </Col>
      <Col :xs="5" :lg="4">
      </Col>
      <Col :xs="5" :lg="4">
        <Select v-model="searchForm.category" placeholder="请选择附件归类">
          <Option value="" key="">全部</Option>
          <Option v-for="(item,key) in tableStatus.category" :value="key" :key="key">{{ item }}</Option>
        </Select>
      </Col>
      <Col :xs="1" :lg="2">
        <Button type="primary" icon="ios-search" @click="getTableDataExcute(1)">Search</Button>
      </Col>
    </Row>
    <br>

    <Row>
      <div class="demo-spin-container" v-if="tableLoading">
        <Spin fix>
          <Icon type="load-c" size=18 class="spin-icon-load"></Icon>
          <div>加载中...</div>
        </Spin>
      </div>
      <Scroll :on-reach-edge="handleReachEdge" :height="690" :loading-text="scroll_text" :distance-to-edge="10">
        <div class="galley-image-photo-list">
          <ul class="pictures  row l-hide" ref="galley-photo">
            <li v-for="(item, key) in feeds.data" :key="key">
              <video id="my-video" class="video-js vjs-custom-skin vjs-big-play-centered   vjs-16-9"
                     controls preload="auto" width="100%"
                     poster=""
                     data-setup="{}">
                <source :src="item.domain + '/' + item.link_path + '/' + item.storage_name" type="video/mp4">
                <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
              </video>
              <div class="photo-text">
                <span class="photo-size">{{ item.size }}</span>
                <span class="photo-date">{{ item.created_at.substring(0,10) }}</span>
              </div>
              <span class="photo-name">{{ item.original_name}}</span>
            </li>
          </ul>
        </div>
        <div v-if="!feeds.data">
          暂无数据
        </div>
      </Scroll>
    </Row>
  </div>
</template>

<script>
import './style.less'
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import Videojs from 'video.js'
import {
  getTableStatus
} from '@/api/common'

import {
  getTableData
} from '@/api/attachment'

export default {
  data () {
    return {
      searchForm: {
        order_by: 'id,desc',
        type: '',
        mime_type: 'video',
        original_name: ''
      },
      notRealySortKey: [],
      tableLoading: false,
      tableStatus: {
        category: []
      },
      feeds: {
        data: [],
        total: 0,
        current_page: 1,
        per_page: 18,
        last_page: 0
      },
      scroll_text: '拼命加载中...'
    }
  },
  mounted () {
    let t = this
    t.getTableStatusExcute('attachments/category')
    t.getTableDataExcute(t.feeds.current_page)
  },
  methods: {
    handleOnPageChange: function (to_page) {
      this.getTableDataExcute(to_page)
    },
    onPageSizeChange: function (per_page) {
      this.feeds.per_page = per_page
      this.getTableDataExcute(this.feeds.current_page)
    },
    getTableStatusExcute (params) {
      let t = this
      getTableStatus(params).then(res => {
        const response_data = res.data
        t.tableStatus.category = response_data
      })
    },
    getTableDataExcute (to_page) {
      let t = this
      t.tableLoading = true
      t.feeds.current_page = to_page
      getTableData(to_page, t.feeds.per_page, t.searchForm).then(res => {
        t.feeds.data = res.data
        t.feeds.total = res.meta.total
        t.feeds.last_page = res.meta.last_page
        t.tableLoading = false
      }, function (error) {
        t.tableLoading = false
      })
    },
    onSortChange: function (data) {
      const order = data.column.key + ',' + data.order
      if (oneOf(data.column.key, this.notRealySortKey)) {

      } else {
        this.searchForm.order_by = order
        this.getTableDataExcute(this.feeds.current_page)
      }
    },
    handleReachEdge (dir) {
      this.scroll_text = '拼命加载中...'
      return new Promise(resolve => {
        let new_page = this.feeds.current_page
        if (dir > 0) {
          new_page = this.feeds.current_page - 1
          if (new_page < 1) {
            this.scroll_text = '已经是第一页了'
            resolve()
            return
          }
        } else {
          new_page = this.feeds.current_page + 1
          if (new_page > this.feeds.last_page) {
            this.scroll_text = '已经是最后一页了'
            resolve()
            return
          }
        }
        this.getTableDataExcute(new_page)
        resolve()
      })
    }
  }
}
</script>
